<template>
	<div class='time-select popup'>
		<div class="content">
			<h3 class="center">修改咨询时间</h3>

			<div class="container">
				<!-- 左侧 - 未来一周 -->
				<ul class="date">
					<li
						style="line-height: 61px;"
					>
						日期
					</li>
					<li
						style="line-height: 40px;"
						v-for="item in date"
						:key="item.date"
					>
						<div>{{item.date}}</div>
					</li>
				</ul>
				<!-- 头部 - 0:00 ~ 24:00 共48个时间 -->
				<div class="time">
					<!-- 时间段 -->
					<ul class="time-range">
						<li class="time-range-item">00:00 ~ 06:00</li>
						<li class="time-range-item">06:00 ~ 12:00</li>
						<li class="time-range-item">12:00 ~ 18:00</li>
						<li class="time-range-item">18:00 ~ 24:00</li>
					</ul>
					<!-- 0-24 -->
					<ul class="time-index">
						<li
							class="time-index-item"
							v-for="index in 24"
							:key="index"
						>
							{{index-1}}
						</li>
					</ul>
					<!-- 时间块 -->
					<div	class="time-block">
						<div
							class="time-block-list"
							v-for="item in date"
							:key="item.date"
						>
							<div
								class="time-block-list-item"
								:class="{
									'leisure' : time !== 0,
									'selected': isSelected(item, index2)
								}"
								v-for="(time,index2) in item.leisureTimes"
								:key="index2"
								@click="onclickTimeBlock(item, index2)"
							/>
						</div>
					</div>
				</div>
			</div>

			<!-- 底部， 图例，确认按键 -->
			<footer>
				<!-- 图例 -->
				<div class="left">
					<div class="leisure-hint">
						可约时间
					</div>
					<div class="selected-hint">
						选择的预约时间
					</div>
					<div class="way">
						<i class="el-icon-mouse" />
						单击左键拖动可选择时间
					</div>
				</div>
				<div class="btns">
					<el-button
						size="mini"
						@click="$emit('close')"
					>
						取消
					</el-button>
					<el-button
						size="mini"
						type="primary"
						@click="$emit('sure',value)"
					>
						确认
					</el-button>
				</div>
			</footer>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    leisureTime: { // 可咨询时间
      type: Array,
      required: true
    },
    meetingTime: { // 已预约的时间
      type: Object,
      required: true
    }
  },
  data() {
    return {
      date: [], // 日期时间数组
      value: null
    }
  },
  computed: {
    /**
     * 是否是选中时间
     */
    isSelected() {
      return function(item, i) {
        if (item.date !== this.value.date) {
          return false
        }
        const timeRange = this.value.time.split('|').filter(item => item).map(item => +item)

        return timeRange.indexOf(i) > -1
      }
    },
  },
  created() {
    this.value = this.meetingTime
    this.initData()
  },
  methods: {
    /**
     * 初始化时间数组
     */
    initData() {
      for (let i = 0; i < 7; i++) {
        /* 生成未来7天数据 */
        const date = moment().add(i, 'days')
        const week = date.weekday() === 0 ? 7 : date.weekday()

        const consultTimeItem = this.leisureTime.find(item => item.sctWeekDay === week)

        /* 生成24小时 48个开始时间 */
        /*
          recordWeek中sctStartTime记录的是可咨询的时间，将他按|拆分
          它的每个值将替换time数组中对应下标的值，也就是下标和值相等, 要注意值是字符串，因此'0'也会校验为true
        */
        const time = new Array(48).fill(0)

        consultTimeItem.sctStartTime.split('|').forEach(item => {
          time[ item ] = item
        })

        if (date.format('YYYY/MM/DD') === this.value.date) {
          this.value.time.split('|').filter(item => item).forEach(item => {
            time[ item ] = item
          })
        }

        this.date.push({
          date: date.format('YYYY/MM/DD'),
          week,
          leisureTimes: time
        })
      }
      console.log(this.value)
      console.log(this.date)
    },
    /**
     * 点击时间块，时间取反
     */
    onclickTimeBlock(item, i) {
      /* 先判断能否点击 */
      if (item.leisureTimes[ i ] === 0) {
        return
      }
      /* 日期变化，清空选中的时间(点击的不是同一天日期) */
      if (item.date !== this.value.date) {
        this.value = {
          date: item.date,
          time: ''
        }
      }
      let times = this.value.time.split('|').filter(item => item).map(item => +item)

      /* 已经选中的取反，没选择的选中 */
      if (this.isSelected(item, i)) {
        times.splice(times.findIndex(item => item === i), 1)
      } else {
        times.push(i)
      }
      /* 重新组合选中的时间 */
      times.sort()
      times = times.join('|')
      this.value = {
        date: item.date,
        time: times
      }
      console.log(this.value)
    }
  }
}
</script>

<style lang='scss' scoped>
.time-select {
  .content {
    h3 {
      margin-bottom: 10px;
      color: $blue;
    }

    ul,
    li {
      box-sizing: border-box;
    }

    .container {
      display: flex;
      width: 950px;
      font-size: $sSmall;
      color: #999999;
      user-select: none;

      .date {
        width: 85px;
        padding: 0;
        font-size: $sMini;
        text-align: center;
        background-color: #f5f5f5;
        border: 1px solid #e6e6e6;
        border-top-left-radius: $radiusMiddle;
        border-bottom-left-radius: $radiusMiddle;

        li {
          &:not(:last-of-type) {
            border-bottom: 1px solid #e6e6e6;
          }
        }
      }

      .time {
        flex: 0 0 864px;

        .time-range {
          display: flex;
          line-height: 30px;
          background-color: #f5f5f5;
          border-top: 1px solid #e6e6e6;
          border-right: 1px solid #e6e6e6;
          border-bottom: 1px solid #e6e6e6;
          border-top-right-radius: $radiusMiddle;

          &-item {
            flex: 0 0 215px;
            text-align: center;

            &:not(:last-of-type) {
              border-right: 1px solid #e6e6e6;
            }
          }
        }

        .time-index {
          display: flex;
          line-height: 30px;
          background-color: #f5f5f5;
          border-right: 1px solid #e6e6e6;
          border-bottom: 1px solid #e6e6e6;

          &-item {
            flex: 0 0 36px;
            text-align: center;

            &:not(:last-of-type) {
              border-right: 1px solid #e6e6e6;
            }
          }
        }

        .time-block {
          &-list {
            display: flex;

            &-item {
              flex: 0 0 18px; // 不可以随便改, 与计算选框有联系
              height: 41px; // 不可以随便改
              cursor: not-allowed;
              border-right: 1px solid #e6e6e6;
              border-bottom: 1px solid #e6e6e6;

              &.leisure {
                cursor: pointer;
                background-color: $blue;
              }

              &.selected {
                cursor: pointer;
                background-color: $green;
              }
            }

            &:last-of-type {
              .time-detail-item:last-of-type {
                border-bottom-right-radius: $radiusMiddle;
              }
            }
          }

          /* 选择框 */
          &-select {
            position: absolute;
            background-color: rgba(75, 138, 251, 0.2);
            border: 1px solid #ff7000;
          }
        }
      }
    }

    footer {
      display: flex;
      align-items: center;
      margin-top: 10px;

      .left {
        display: flex;
        flex: 1;
        font-size: $sSmall;

        .leisure-hint,
        .selected-hint {
          display: flex;
          align-items: center;
          margin-right: 15px;

          &::before {
            width: 10px;
            height: 10px;
            margin-right: 5px;
            content: '';
          }
        }

        .leisure-hint::before {
          background-color: $blue;
        }

        .selected-hint::before {
          background-color: $green;
        }
      }
    }
  }
}
</style>
